<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>报警类别统计</span>
          </div>
          <div id="chart1" class="card_chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>报警设备数量统计</span>
          </div>
          <div id="chart2" class="card_chart"></div>
        </el-card>
      </el-col>
    </el-row>

    <div id="chart3" class="chart"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chart1: null,
      chart2: null,
      chart3: null,
      option1: null,
      option2: null,
      option3: null,
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      this.chart1 = this.$echarts.init(document.getElementById("chart1"));
      this.chart2 = this.$echarts.init(document.getElementById("chart2"));
      this.chart3 = this.$echarts.init(document.getElementById("chart3"));
      this.option1 = {
        title: {
          text: '设备类别报警',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '设备类别',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '停机' },
              { value: 735, name: '掉线' },
              { value: 580, name: '设备故障' },
              { value: 484, name: '其他' },
              { value: 300, name: '急停' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.option3 = {
          title: {
          text: '总报警数量统计',
          left: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };
      this.chart1.setOption(this.option1);
      this.chart2.setOption(this.option1);
      this.chart3.setOption(this.option3);
    },
  }
}
</script>

<style lang="scss" scoped>
.card_chart {
  margin-top: 10px;
  height: 300px;
  width: 100%;
}

.chart {
  margin-top: 40px;
  height: 600px;
  width: 100%;
}
</style>